@import "init";
@import "font";

* {
  color: greenyellow;
}

.init_animation() {
    @keyframes keypress {
        100% {
            width: 5.7em;
            height: 5.7em;
            border-color: transparent;
        }
    }
}

.init_animation();

// 设置面板
.settings {
  width: 90%;
  height: 600px;
  outline: solid 1px;
  margin: 0 auto;
  position: relative;
  // 调式复选框
  select {
    background-color: black;
    color: greenyellow;
  }

  input {
    .EngFont();
  }

  // 双手按键
  #keys_twohands {
    // 左手右手界面
    .leftHand,
    .rightHand {
      position: absolute;
      width: 500px;
      height: 500px;
      outline: solid 1px;

      .handImg {
        position: absolute;
        outline: solid 1px;
        width: 350px;
        height: 350px;
        top: 60px;
        z-index: -5;
      }
    }

    // 输入框
    .fingerKeyInput {
      width: 50px;
      display: block;
      font-size: 20px;
      text-indent: 0.5em;
      position: absolute;
      transition: all 0.2s;
      background-color: black;

      &:hover {
        background-color: #2b2b2b;
      }
    }

    // 左侧
    .leftHand {
      .handImg {
        left: 40px;
      }

      .lshift {
        left: 26px;
        top: 307px;
      }

      .rshift {
        left: 313px;
        top: 302px;
      }

      .f1 {
        left: 0;
        top: 142px;
      }

      .f2 {
        left: 39px;
        top: 103px;
      }

      .f3 {
        left: 98px;
        top: 82px;
      }

      .f4 {
        left: 152px;
        top: 49px;
      }

      .f5 {
        left: 209px;
        top: 38px;
      }

      .f6 {
        left: 274px;
        top: 70px;
      }

      .f7 {
        left: 317px;
        top: 169px;
      }

      .f8 {
        left: 365px;
        top: 184px;
      }

      .f9 {
        left: 417px;
        top: 187px;
      }
    }

    // 右侧
    .rightHand {
      position: absolute;
      right: 0;

      .fingerKeyInput {
        width: 50px;
        display: block;
        font-size: 20px;
      }

      .handImg {
        right: 40px;
      }

      .lshift {
        left: 97px;
        top: 321px;
      }

      .rshift {
        left: 425px;
        top: 313px;
      }

      .f1 {
        left: 26px;
        top: 199px;
      }

      .f2 {
        left: 85px;
        top: 165px;
      }

      .f3 {
        left: 139px;
        top: 162px;
      }

      .f4 {
        left: 181px;
        top: 66px;
      }

      .f5 {
        left: 239px;
        top: 37px;
      }

      .f6 {
        left: 296px;
        top: 43px;
      }

      .f7 {
        left: 347px;
        top: 69px;
      }

      .f8 {
        left: 396px;
        top: 72px;
      }

      .f9 {
        left: 445px;
        top: 73px;
      }
    }
  }

  // 原琴按键
  #keys_genshin {
    display: flex;
    align-items: center;
    flex-direction: column;

    .line {
      display: flex;
      margin: 0.7em 0;

      .key {
        width: 4em;
        height: 4em;
        background-color: #fff9ef;
        color: #000;
        margin: 0 0.7em;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;
        position: relative;
        transition: all 0.3s;

        &::after {
            // 里面的圈
            content: "";
            position: absolute;
            border-radius: 50%;
            width: 3.3em;
            height: 3.3em;
            border: 3px solid #e2dfd5;
        }

        &::before {
            // 外面的圈
            content: "";
            position: absolute;
            border-radius: 50%;
            width: 3.3em;
            height: 3.3em;
            border: 3px solid #e2dfd5;
        }

        &.animate::before {
            animation: keypress 0.6s;
        }

        &.pressed {
            filter: invert(80%);
        }
      }
    }
  }
}
